Skip to main content

JavaScript SDK Methods Reference

Welcome to the TideCloak SDK Reference This Reference List will help you get started with integrating TideCloak into your Single Page Application (SPA) using Vanilla JavaScript. Follow the steps below to understand and implement the methods used with TideCloak to secure your application.

1. Prerequisites​

Before you begin, make sure you have:

  • A TideCloak server up and running.
  • A registered client in TideCloak.
  • Basic knowledge of JavaScript and web development.

2. Installation​

keycloak.js​

Install the TideCloak JavaScript adapter by including the TideCloak JavaScript file in your project:

<script src="https://cdn.jsdelivr.net/npm/keycloak-js@25.0.2/dist/keycloak.min.js"></script>

3. Configuration​

Keycloak()​

Initialize the TideCloak object with your client configuration:

var keycloak = new Keycloak({
    url: 'https://your-keycloak-server/auth',
    realm: 'your-realm',
    clientId: 'your-client-id'
});

4. Initialization​

init()​

To initialize Keycloak in your application, use the init method:

keycloak.init({ 
    onLoad: 'login-required', 
    checkLoginIframe: true,
    flow: 'standard'
}).then(function(authenticated) {
    console.log(authenticated ? 'Authenticated' : 'Not authenticated');
}).catch(function() {
    console.log('Failed to initialize Keycloak');
});

Options:

  • onLoad: Specifies how the authentication process should be handled on page load.
    • 'login-required': Forces the user to log in if not authenticated.
    • 'check-sso': Checks if the user is logged in without forcing login.
  • checkLoginIframe: Enables or disables the use of an iframe to detect if the user is logged in.
    • true (default): Enables the iframe check.
    • false: Disables the iframe check.
  • flow: Defines the OAuth 2.0 flow to be used.
    • 'standard' (default): Authorization Code Flow.
    • 'implicit': Implicit Flow.
    • 'hybrid': Hybrid Flow.

Example:

keycloak.init({
    onLoad: 'login-required',
    checkLoginIframe: false,
    flow: 'implicit'
}).then(function(authenticated) {
    console.log(authenticated ? 'Authenticated' : 'Not authenticated');
}).catch(function() {
    console.log('Failed to initialize Keycloak');
});

5. Authentication Handling​

login()​

TideCloak automatically redirects users to the login page. However, if needed, you can manually trigger the login process using:

keycloak.login({ 
    redirectUri: 'https://your-app.com/callback',
    prompt: 'login'
});

Options:

  • redirectUri: Specifies the URI to redirect to after login.
  • prompt: Controls how the login page is displayed.
    • 'login': Forces the user to enter credentials.
    • 'none': Attempts silent login, avoiding the login page if possible.
    • 'consent': Displays the consent page.

Example:

keycloak.login({
    redirectUri: 'https://your-app.com/dashboard',
    prompt: 'consent'
});

logout()​

To log the user out, use the logout method:

keycloak.logout({ 
    redirectUri: 'https://your-app.com/goodbye'
});

Options:

  • redirectUri: Specifies the URI to redirect to after logout.

Example:

keycloak.logout({
    redirectUri: 'https://your-app.com/after-logout'
});

register()​

Redirects the user to the registration page:

keycloak.register({
    redirectUri: 'https://your-app.com/welcome'
});

Options:

  • redirectUri: Specifies the URI to redirect to after registration.

Example:

keycloak.register({
    redirectUri: 'https://your-app.com/after-register'
});

accountManagement()​

Redirects the user to the TideCloak account management console:

keycloak.accountManagement();

6. Accessing User Information​

loadUserProfile()​

The loadUserProfile() method loads the user profile details from the TideCloak server:

keycloak.loadUserProfile().then(function(profile) {
    console.log('User profile', profile);
}).catch(function() {
    console.log('Failed to load user profile');
});

Example:

keycloak.loadUserProfile().then(function(profile) {
    console.log('User profile', profile);
}).catch(function() {
    console.log('Failed to load user profile');
});

7. Protecting Routes​

authenticated​

You can protect routes in your SPA by checking the user’s authentication status:

if (!keycloak.authenticated) {
    keycloak.login();
}

Example:

if (!keycloak.authenticated) {
    keycloak.login({redirectUri: window.location.href});
} else {
    console.log('User is authenticated');
}

8. Debugging and Logging​

enableLogging​

Enable debugging by setting the enableLogging option in the TideCloak initialization:

keycloak.init({
    onLoad: 'login-required',
    enableLogging: true
});

Options:

  • enableLogging: When set to true, logs additional debug information to the console.

Example:

keycloak.init({
    onLoad: 'check-sso',
    enableLogging: true
}).then(function(authenticated) {
    console.log('Logging enabled and user authenticated:', authenticated);
});

9. Security​

Enecryption​

Decryption​